<template>
  <div class="settings-container">
    <!-- 基础配置模块 -->
    <el-card class="setting-card">
      <template #header>
        <div class="card-header">
          <el-icon><Setting /></el-icon>
          <span>基础配置</span>
        </div>
      </template>

      <el-form label-width="120px">
        <el-form-item label="系统名称">
          <el-input v-model="form.systemName" />
        </el-form-item>

        <el-form-item label="系统Logo">
          <el-upload action="#" drag :auto-upload="false" :on-change="handleLogoUpload">
            <el-icon><Upload /></el-icon>
            <div class="el-upload__text">拖拽文件或点击上传</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="时区选择">
          <el-select v-model="form.timezone">
            <el-option
              v-for="tz in timezones"
              :key="tz.value"
              :label="tz.label"
              :value="tz.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 安全与权限模块 -->
    <el-card class="setting-card">
      <template #header>
        <div class="card-header">
          <el-icon><Lock /></el-icon>
          <span>安全与权限</span>
        </div>
      </template>

      <el-form label-width="120px">
        <el-form-item label="密码策略">
          <el-input-number v-model="form.passwordMinLength" :min="6" :max="20" /> 位最小长度
        </el-form-item>

        <el-form-item label="双因素认证">
          <el-switch v-model="form.twoFactorAuth" />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="saveAll">保存所有更改</el-button>
      <el-button @click="resetToDefault">恢复默认</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Setting, Upload, Lock } from '@element-plus/icons-vue'

const form = ref({
  systemName: '智途安行管理中心',
  timezone: 'GMT+8',
  passwordMinLength: 8,
  twoFactorAuth: true,
})

const timezones = [
  { value: 'GMT+8', label: 'GMT+8 北京时区' },
  { value: 'GMT+9', label: 'GMT+9 东京时区' },
]

const handleLogoUpload = () => {
  // 处理文件上传逻辑
}

const saveAll = () => {
  // 保存逻辑
}

const resetToDefault = () => {
  // 恢复默认设置
}
</script>

<style lang="scss" scoped>
.settings-container {
  padding: 20px;
  position: relative;
}

.setting-card {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-bar {
  //position: sticky;
  bottom: 20px;
  background: white;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.el-form-item {
  margin-bottom: 22px;
}
</style>
